<template>
  <div class="get-box flex flex-center" :class="toastPosition ? 'absolute' : ''">
    <div class="get-layer text-align-c pad-t-16 pad-b-16 pad-l-10 pad-r-10">
      <img v-if="toastType === 'success'" src="/static/icons/w-icon-success.png" alt=""
        class="width-30 height-30">
      <img v-if="toastType === 'loading'" src="/static/icons/w-icon-loading.gif" alt=""
        class="width-30 height-30">
      <img v-if="toastType === 'warm'" src="/static/icons/w-icon-waring.png" alt=""
        class="width-30 height-30">
      <p class="font-15 font-white mar-t-7">{{ toastContent }}</p>
      <p class="font-15 font-white mar-t-2 text-align-c" v-if="toastDesc">{{ toastDesc }}</p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timer: null
      }
    },
    props: {
      toastContent: {
        type: String,
        default: ''
      },
      toastDesc: {
        type: String,
        default: ''
      },
      toastTimer: {
        type: String,
        default: ''
      },
      toastType: {
        type: String,
        default: ''
      },
      toastPosition: {
        type: String,
        default: ''
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    mounted() {
      this.hideToast()
    },
    methods: {
      hideToast() {
        clearTimeout(this.timer)
        this.timer = null
        if (!this.toastTimer) {
          this.toastTimer = 3000
        }
        this.timer = setTimeout(() => {
          this.$parent.toastShow = false
        }, this.toastTimer)
      }
    }
  }
</script>

<style scoped lang="less">
  .turn{
    animation:turn 2.6s linear infinite;      
  }
  @keyframes turn{
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
  }
  .get-box{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 20001;
    &.absolute{
      position: absolute;
    }
  }
  .get-layer{
    min-width: 110px;
    margin: -75px 0 0 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    line-height: 1.3;
    img{
      display: inline-block;
      margin: 0 auto;
    }
  }
</style>
